<template>
  <div class="app-container">
		<el-scrollbar class="app-container-scroll-bar">
      <el-row style="margin-top:10px;border-bottom:1px solid #e2e7eb;">
        <el-col style="font-size:20px;margin-bottom:10px;" :span="24">
          <span style="margin-left:20px;">部门管理</span>
        </el-col>
      </el-row>
      <el-row style="height:100px;border-top:none;border-bottom:1px solid #e2e7eb;">
        <el-col style="margin-top:35px;">
           <span style="margin-left:20px;">名称：</span>
           <el-input style="width:165px;" v-model="deptName"></el-input>
           <el-button type="primary" style="margin-left:15px;" @click="handleSearch">
             <i class="iconfont icon-search"></i>查询
           </el-button>
           <el-button type="primary"
               class="chongzhibtn" 
              style="margin-left:15px;background:#81ace3;border-color:#81ace3;" @click="handleRefshbtn">
             <i class="iconfont icon-23refresh"></i>重置
           </el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top:30px;">
        <el-col>
            <el-button size="small" style="float:right;margin-right:25px;" @click="handleAdd">
              <i class="iconfont icon-folder-add"></i>新建部门
            </el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-col :span="23" style="margin-left:25px;">
          <tree-table :data="data" :eval-func="func"  :expand-all="expandAll" v-loading="loading">
            <el-table-column label="部门名称" >
              <template slot-scope="scope">
                <span>{{scope.row.text}}</span>
                <i class="el-icon-edit" @click="handleUpdateName(scope.row)" style="cursor:pointer"></i>
              </template>
            </el-table-column>
            <el-table-column label="部门编号" align="center">
              <template slot-scope="scope">
                  <span>{{scope.row.id}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                  <span v-if="scope.row.disabled" style="color:red">禁用</span>
                  <span v-else style="color:#52c41a">启用</span>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="是否启用" align="center">
              <template slot-scope="scope">
                 <el-switch
                    v-model="scope.row.disabled"
                    active-color="#ff4949"
                    inactive-color="#13ce66"
                    @change="handleChangeStatus(scope.row)">
                  </el-switch>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="200" align="right">
              <template slot-scope="scope">
                <a title="删除" style="font-size:16px;display:inline-block;margin-top:3px;cursor: pointer;"  
                   @click="handleDelete(scope.row)">
                  <i class="el-icon-delete"></i>
                </a>
                <a title="新增" style="font-size:16px;display:inline-block;margin-top:3px;cursor: pointer;margin-left: 15px;"  
                   @click="handleAddChild(scope.row)">
                  <i class="el-icon-circle-plus-outline"></i>
                </a>
              </template>
            </el-table-column>
          </tree-table>
        </el-col>
      </el-row>
    </el-scrollbar>
    <!-- 新增弹窗 -->
    <add-b-m-dialog ref="addbmdialog" @handleRefsh="handleRefsh">
    </add-b-m-dialog>
    
    <update-name ref="editname" @handleSuccess="handleRefsh">
    </update-name>

  </div>
</template>

<script>
import addBMDialog from './bumen/addBMDialog'
import updateName from './bumen/updateName'
import treeTable from '@/components/TreeTable'
import treeToArray from './tree/customEval'
import {getTree,deleteDeptById,updateDept} from '@/service/swagger/DeptController.js'
export default {
  name: 'CustomTreeTableDemo',
  components: { 
    treeTable,
    addBMDialog,
    updateName
  },
  data() {
    return {
      deptName:'',
      loading:false,
      func: treeToArray,
      expandAll: false,
      data:{},
    }
  },
  mounted() {
    this.getDepData()
  },
  methods: {
    //获取部门菜单树
    getDepData(){
      this.loading = true
      getTree({}).then(ret=>{
      this.loading = false
        if(ret&&ret.code == 0){
          console.log(ret)
          if(ret.data.id && ret.data.id == '-1'){
            this.data = ret.data.children
          }else if(ret.data.id){
            this.data = ret.data
          }else{
            this.data = []
          }
        }
      })
    },
    //新增部门
    handleAdd(){
      this.$refs.addbmdialog.open()
    },
    // 删除
    handleDelete(row){
      this.$confirm('确定删除该部门?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row)
        deleteDeptById(row.id).then(ret=>{
          if(ret&&ret.code == 0){
            this.handleRefsh()
            this.$message({type: 'success',message: '删除成功!'})
          }else{
            this.$message({type: 'error',message: '删除失败!'})
          } 
        })
      })
    },
    //新增子集部门
    handleAddChild(row){
      console.log(row)
      this.$refs.addbmdialog.open(row)
    },
    // //修改部门状态
    // handleChangeStatus(row){
    //   console.log(row)
    //   let param = {}
    //   param.status = row.disabled ? 2 : 1
    //   param.deptId = row.id
    //   updateDept(param).then(ret=>{
    //     if(ret&&ret.code == 0){
    //       this.handleRefsh()
    //       this.$message({type: 'success',message: '操作成功!'})
    //     }else{
    //       this.$message({type: 'error',message: '操作失败!'})
    //     }
    //   })
    // },
    //搜索
    handleSearch(){
      this.loading = true
      getTree({deptName:this.deptName}).then(ret=>{
      this.loading = false
        if(ret&&ret.code == 0){
          console.log(ret)
          if(ret.data.id && ret.data.id == '-1'){
            this.data = ret.data.children
          }else if(ret.data.id){
            this.data = ret.data
          }else{
            this.data = []
          }
        }
      })
    },
    handleRefshbtn(){
        this.deptName = ''
        this.handleSearch()
    },
    //修改名称
    handleUpdateName(row){
       this.$refs.editname.open(row)
    },
    handleRefsh(){
      this.getDepData()
    }
  }
}
</script>



<style scoped>
.chongzhibtn:hover{
  background: #0082f3;
  border-color: #0082f3;
}
</style>

